<template>
	<div class="find">
		<div class="rollback">
			<i class="fa fa-angle-left" @click="goBack()"></i>
		</div>
		<!-- 模块 1 -->
		<div class="module">
			<img class="rounded-image scaled-image" src="../assets/sypd.png" alt="首页频道" />
		</div>

		<!-- 模块 2 -->
		<div class="module">
			<img class="rounded-image scaled-image" src="../assets/pzms.png" alt="品质美食" />
		</div>

		<!-- 模块 3 -->
		<div class="module">
			<img class="rounded-image scaled-image" src="../assets/tdyp.png" alt="甜点饮品" />
		</div>

		<!-- 模块 4 -->
		<div class="module">
			<img class="rounded-image scaled-image" src="../assets/sdcs.png" alt="商店超市" />
		</div>

		<!-- 模块 5 -->
		<div class="module">
			<img class="rounded-image scaled-image" src="../assets/tstj.png" alt="特色推荐" />
		</div>

		<!-- 模块 6 -->
		<div class="module">
			<img class="rounded-image scaled-image" src="../assets/sqhw.png" alt="省钱好玩" />
		</div>

		<!-- 模块 7 -->
		<div class="module">
			<img class="rounded-image scaled-image" src="../assets/shfw.png" alt="生活服务" />
		</div>
		<!-- 底部菜单部分 -->
        <!-- <footer-page></footer-page> -->
		<ul class="footer">
		<li @click="toIndexPage()">
			<i class="fa fa-home"></i>
			<p>首页</p>
		</li>
		<li @click="toFindPage()">
			<i class="fa fa-compass"></i>
			<p>发现</p>
		</li>
		<li @click="toOrderList()">
			<i class="fa fa-file-text-o"></i>
			<p>订单</p>
		</li>
		<li @click="toUserCenter()">
			<i class="fa fa-user-o"></i>
			<p>我的</p>
		</li>
	</ul>
	</div>
	
</template>


<style scoped>
	.find {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		/* 每行显示1个模块 */
		gap: 10px;
		/* 设置模块之间的间距 */
	}
	.find .rollback i{
		position: fixed;
		top: 0.8vw;
		left: 3vw;
		display: flex;
		align-items: center;
		cursor: pointer;

		color: #333;
		font-size: 8vw;

		z-index: 2000;
	}
	.module {
		border: 1px solid #ccc;
		padding: 10px;
		/* 减小模块内边距 */
		text-align: center;
		background-color: #f0f8ff;
		/* 设置背景色为浅蓝色 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.scaled-image {
		width: 100%;
		/* 设置图片宽度为100% */
		height: auto;
		/* 自动计算图片高度，以保持纵横比 */
		border-radius: 10px;
		/* 设置图片为圆角 */
		margin: 5px;
		/* 减小图片边距 */
	}

	.footer {
		width: 100%;
		height: 14vw;
		border-top: solid 1px #DDD;
		background-color: #fff;
		/* 固定定位 */
		position: fixed;
		left: 0;
		bottom: 0;

		display: flex;
		justify-content: space-around;
		align-items: center;

		z-index: 3000
	}

	.footer li {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		color: #999;
		user-select: none;
		cursor: pointer;
	}

	.footer li p {
		font-size: 2.8vw;
	}

	.footer li i {
		font-size: 5vw;
	}

	
</style>

<script>
// import FooterPage from '../components/FooterPage.vue';
	export default {
		name: 'FindPage',
		methods:{
			goBack(){
				window.history.go(-1); // 回退到上一页
			}
			,
			toIndexPage() {
				this.$router.push('/index')
			},
			toOrderList() {
				this.$router.push('/orderList')
			},
			toUserCenter() {
				this.$router.push('/userCenter')
			},
			toFindPage() {
				this.$router.push('/findPage')
			}
		}
		// ,components:{
		// 	FooterPage
		// }
	}

	
</script>
